<template>
	<div class="next-step-template-wrapper">
		<el-form-item label="下一步" :prop="prop" :required="true" :rules="rules">
			<el-select :value="value" placeholder="下一步操作" :disabled="showDetail" @change="onChange" :class="videoType === 'pre-recorded-video' ? 'select-pre-recorded' : ''">
				<el-option v-for="item in nextStepOption" :key="item.value" :label="item.taskName" :value="item.taskId"> </el-option>
			</el-select>
		</el-form-item>
	</div>
</template>

<script>
import AIWorkflow from '@/modules/workFlow';
export default {
	props: {
		nextStepOption: {
			type: Array,
			default: () => [],
			required: true
		},
		prop: {
			type: String,
			default: () => ''
		},
		value: {
			type: String,
			required: true,
			default: () => ''
		},
		labelWidth: {
			type: Number,
			default: () => 100
		},
		showDetail: {
			type: Boolean,
			default: () => false
		},
		rules: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			videoType: '',
			audioType: ''
		};
	},

	mounted() {
		console.log('nextStepOption', this.nextStepOption);
		const { videoType = null, audioType = null } = AIWorkflow.getRobotProperty();
		this.videoType = videoType;
		this.audioType = audioType;
	},

	methods: {
		onChange(value) {
			console.log(this.prop);
			this.$emit('onChange', this.prop, value);
		}
	}
};
</script>
